<!--主页面-->
<template>
    <div v-if="isAuthenticated" class="home" style="width: 100%; height: 100%;">
        <el-container>
            <el-header style="height: auto;">
                <el-input clearable placeholder="请输入问题标题" v-model="searchInput" class="input-with-select"
                    style="padding-top: 20px;">
                    <template #append>
                        <el-button :icon="Search" @click="handleSearch()" />
                    </template>
                </el-input>
                <el-cascader v-model="fftags" :options="tagOptions" :props="props" placeholder="标签分类" clearable
                    filterable style="width: 800px; margin-top: 10px;" @change="handleTags" />
            </el-header>

            <el-main>
                <el-dialog v-model="dialogFormVisible" title="编辑问题" width="600">
                    <question-form :question-id="formID" />
                </el-dialog>

                <el-table v-loading="loading" :data="getQuestionTableData()" style="width: 100%">
                    <el-table-column prop="title" label="问题" />
                    <el-table-column prop="statues" label="状态" />
                    <el-table-column prop="add_time" label="时间" />
                    <!--编辑按钮-->
                    <el-table-column label="操作" width="200">
                        <template #default="{ row, column, $index }">
                            <el-button type="primary" size="small" @click="openDialog($index)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-pagination style="margin-top: 20px;" v-model:current-page="currentTablePage"
                    v-model:page-size="pageSize" :background="true" layout="prev, pager, next, jumper" :total="1000"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-main>
            <app-footer />

        </el-container>
    </div>
    <el-empty v-else description="暂无数据" />
</template>

<style scoped></style>

<script lang="ts">
export default {
    name: `Home`
}
</script>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
    ElButton,
    ElContainer,
    ElHeader,
    ElMain,
    ElMessage
} from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import AppFooter from "../components/Footer.vue";
import QuestionForm from "../components/QuestionForm.vue";
import { onMounted } from 'vue';
import axios from 'axios';


const token = localStorage.getItem('token'); // 获取token

onMounted(async () => {
    if (!token) {
        return;
    }
    let { data } = await axios({ url: '/api/issue_data/get_list', method: 'post', headers: { token }, data: {}, params: {} })
    if (data.code != 0) {
        return;
    }
    console.log(data.data);

})
/**
 * 是否登录
 */
const isAuthenticated = ref(true)

//#region 数据
function getQuestionTableData(): {
    title: string,
    statues: string,
    add_time: string
}[] {
    return [
        {
            title: '问题1',
            statues: '已解决',
            add_time: '2022-01-01'
        },
        {
            title: '问题2',
            statues: '未解决',
            add_time: '2022-01-02'
        },
        {
            title: '问题3',
            statues: '已解决',
            add_time: '2022-01-03'
        },
        {
            title: '问题4',
            statues: '未解决',
            add_time: '2022-01-04'
        },
        {
            title: '问题5',
            statues: '已解决',
            add_time: '2022-01-05'
        },
        {
            title: '问题6',
            statues: '未解决',
            add_time: '2022-01-06'
        },
        {
            title: '问题5',
            statues: '已解决',
            add_time: '2022-01-05'
        },
        {
            title: '问题6',
            statues: '未解决',
            add_time: '2022-01-06'
        },
        {
            title: '问题5',
            statues: '已解决',
            add_time: '2022-01-05'
        },
        {
            title: '问题6',
            statues: '未解决',
            add_time: '2022-01-06'
        },
        {
            title: '问题5',
            statues: '已解决',
            add_time: '2022-01-05'
        },
        {
            title: '问题6',
            statues: '未解决',
            add_time: '2022-01-06'
        },
        {
            title: '问题5',
            statues: '已解决',
            add_time: '2022-01-05'
        },
        {
            title: '问题6',
            statues: '未解决',
            add_time: '2022-01-06'
        },
        {
            title: '问题5',
            statues: '已解决',
            add_time: '2022-01-05'
        },
        {
            title: '问题6',
            statues: '未解决',
            add_time: '2022-01-06'
        }
    ]

}
//#endregion

//#region 页面加载
const loading = ref(false)
//#endregion

//#region 搜索框

/**
 * 搜索框内容
 */
const searchInput = ref('')

/**
 * 搜索
 */
function handleSearch(): void {
    if (searchInput.value.length > 0) {
        console.log(searchInput.value)
    }
    else {
        console.log('请输入搜索内容')
        searchInputIsEmpty()
    }
}
/**
 * 提示用户搜索框为空
 */
const searchInputIsEmpty = () => {
    ElMessage({
        message: '请输入搜索内容',
        type: 'warning',
    })
}

//#endregion

const fftags = ref([])

const props = {
    multiple: true
}

const tagOptions = ref(getTagOptions())

function getTagOptions() {
    return [
        {
            value: 1,
            label: '系统',
            children: [
                {
                    value: 2,
                    label: 'openKylin2.0',
                    children: [
                        { value: 3, label: '测试' },
                        { value: 4, label: '正式版' },
                    ],
                },
                {
                    value: 6,
                    label: 'openKylin1.0',
                    children: [
                        { value: 7, label: '测试' },
                        { value: 8, label: '正式版' },
                    ],
                }
            ],
        },
        {
            value: 9,
            label: '场景',
            children: [
                {
                    value: 10,
                    label: '办公',
                    children: [
                        { value: 11, label: '桌面' },
                        { value: 12, label: '设置' }
                    ],
                },
            ],
        }
    ]
}

const handleTags = () => {
    console.log(fftags.value.toString())
}

//#region 表单

//#endregion


//#region 表格分页

const currentTablePage = ref(1)
const pageSize = ref(10)

function handleSizeChange(val: number) {

}

function handleCurrentChange(val: number) {
    console.log(`当前页: ${val}`)

}
//#endregion


const dialogFormVisible = ref(false);
const formID = ref(0);

function openDialog(id: number) {
    formID.value = id;
    dialogFormVisible.value = true;
}

</script>
